<template>
  <div>
    <!-- 1 -->
    <div v-if="quest_type === 1">
      <el-table :data="option1" border stripe>
        <el-table-column
          label="单选项"
          width="100"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.is_true"
              :label="scope.row.code"
              @change="handleChange1(scope.row.code)"
            ></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column
          label="单选项内容"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-input
              type="textarea"
              v-model="scope.row.content"
              placeholder="请输入单选项内容"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="选项图片"
          align="center"
          width="150"
          header-align="center"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="150"
          header-align="center"
        >
          <template #default="scope">
            <div v-if="btn1Flag(scope.$index)">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="handleDelete1(scope.$index)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                circle
                @click="handleAdd1(scope.$index)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 2 -->
    <div v-else-if="quest_type === 2">
      <el-table :data="option2" border stripe>
        <el-table-column
          label="多选项"
          width="100"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.is_true"
              :label="scope.row.code"
            ></el-checkbox>
          </template>
        </el-table-column>

        <el-table-column
          label="多选项内容"
          align="center"
          header-align="center"
        >
          <template #default="scope">
            <el-input
              type="textarea"
              v-model="scope.row.content"
              placeholder="请输入多选项内容"
            ></el-input>
          </template>
        </el-table-column>

        <el-table-column
          label="选项图片"
          align="center"
          width="150"
          header-align="center"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          width="150"
          header-align="center"
        >
          <template #default="scope">
            <div v-if="btn2Flag(scope.$index)">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                circle
                @click="handleDelete2(scope.$index)"
              ></el-button>
              <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                circle
                @click="handleAdd2(scope.$index)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 3 -->
    <div v-else-if="quest_type === 3">
      <el-table border :data="option3">
        <el-table-column label="判断项">
          <template #default="scope">
            <el-checkbox
              v-model="scope.row.is_true"
              :label="scope.row.code"
              @change="handleChange3(scope.row.code)"
            >
            </el-checkbox>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 4 -->
    <div v-else-if="quest_type === 4">
      <WangEditor
        placeholder="请输入简答题答案"
        v-model="data.quest_answer"
      ></WangEditor>
    </div>
    <div v-else>请选择试题类型，生成答案模板</div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import WangEditor from './WangEditor'

const initOption1 = [
  { code: 'A', content: '', is_true: false, pic: '' },
  { code: 'B', content: '', is_true: false, pic: '' },
  { code: 'C', content: '', is_true: false, pic: '' },
  { code: 'D', content: '', is_true: false, pic: '' },
]
const initOption2 = [
  { code: 'A', content: '', is_true: false, pic: '' },
  { code: 'B', content: '', is_true: false, pic: '' },
  { code: 'C', content: '', is_true: false, pic: '' },
  { code: 'D', content: '', is_true: false, pic: '' },
]
const initOption3 = [
  { code: '正确', content: '', is_true: false },
  { code: '错误', content: '', is_true: false },
]
export default {
  name: 'AnswerQuestion',
  components: {
    WangEditor,
  },
  props: {
    quest_type: {
      type: [Number, String],
      default: '',
    },
    answer: {
      type: [String, Array],
      default: '',
    },
    options: {
      type: [String, Array],
      default: '',
    },
    isEdit: {
      type: [Boolean, String],
      default: false,
    },
    value: {
      type: [Object],
    },
  },
  data() {
    return {
      abc: ['A', 'B', 'C', 'D', 'E', 'F'],

      option1: initOption1,

      option2: initOption2,

      option3: initOption3,

      flag: true,
    }
  },

  methods: {
    handleChange1(val) {
      this.option1.forEach(item => {
        item.is_true = false
        if (item.code === val) {
          item.is_true = true
        }
      })
    },

    btn1Flag(val) {
      if (val === this.option1.length - 1) {
        return true
      } else {
        return false
      }
    },

    handleAdd1(val) {
      if (val + 2 > this.abc.length) {
        Message({
          message: '最多只能添加' + this.abc.length + '个选项',
          type: 'warning',
        })
        return
      }
      this.option1.push({
        code: this.abc[this.option1.length],
        content: '',
        is_true: false,
        pic: '',
      })
    },

    handleDelete1(val) {
      if (val < 2) {
        Message({
          message: '至少' + 2 + '个选项',
          type: 'warning',
        })
        return
      }
      this.option1.pop()
    },

    btn2Flag(val) {
      if (val === this.option2.length - 1) {
        return true
      } else {
        return false
      }
    },

    handleAdd2(val) {
      if (val + 2 > this.abc.length) {
        Message({
          message: '最多只能添加' + this.abc.length + '个选项',
          type: 'warning',
        })
        return
      }
      this.option2.push({
        code: this.abc[this.option2.length],
        content: '',
        is_true: false,
        pic: '',
      })
    },

    handleDelete2(val) {
      if (val < 2) {
        Message({
          message: '至少' + 2 + '个选项',
          type: 'warning',
        })
        return
      }
      this.option2.pop()
    },

    handleChange3(val) {
      this.option3.forEach(item => {
        item.is_true = false
        if (item.code === val) {
          item.is_true = true
        }
      })
    },
  },

  computed: {
    quest_answer() {
      if (this.quest_type === 1) {
        return this.option1
          .filter(item => item.is_true)
          .map(item => item.code)
          .join()
      } else if (this.quest_type === 2) {
        return this.option2
          .filter(item => item.is_true)
          .map(item => item.code)
          .join()
      } else if (this.quest_type === 3) {
        return this.option3
          .filter(item => item.is_true)
          .map(item => item.code)
          .join()
      } else if (this.quest_type === 4) {
        return this.data.quest_answer
      } else {
        return
      }
    },

    quest_options() {
      if (this.quest_type === 1) {
        return this.option1
      } else if (this.quest_type === 2) {
        return this.option2
      } else if (this.quest_type === 3) {
        return this.option3
      } else if (this.quest_type === 4) {
        return []
      } else {
        return
      }
    },

    data() {
      return this.value
    },
  },

  watch: {
    quest_type: {
      async handler(val) {
        if (this.flag || val === 4) {
          if (this.isEdit) {
            if (val === 1) {
              this.option1 = JSON.parse(this.data.quest_options)
              this.option2 = initOption2
              this.option3 = initOption3
            } else if (val === 2) {
              this.option1 = initOption1
              this.option2 = JSON.parse(this.options)
              this.option3 = initOption3
            } else if (val === 3) {
              this.option1 = initOption1
              this.option2 = initOption2
              this.option3 = JSON.parse(this.options)
            } else if (val === 4) {
              this.option1 = initOption1
              this.option2 = initOption2
              this.option3 = initOption3
              this.data.quest_answer = await this.value.quest_answer
            } else {
              this.option1 = initOption1
              this.option2 = initOption2
              this.option3 = initOption3
            }
          }
          if (!this.isEdit) {
            if (val === 1) {
              this.option1 = [
                {
                  code: 'A',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'B',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'C',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'D',
                  content: '',
                  is_true: false,
                  pic: '',
                },
              ]
            } else if (val === 2) {
              this.option2 = [
                {
                  code: 'A',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'B',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'C',
                  content: '',
                  is_true: false,
                  pic: '',
                },
                {
                  code: 'D',
                  content: '',
                  is_true: false,
                  pic: '',
                },
              ]
            } else if (val === 3) {
              this.option3 = [
                { code: '正确', content: '', is_true: false },
                { code: '错误', content: '', is_true: false },
              ]
            } else if (val === 4) {
            } else {
            }
          }
          this.flag = false
        }
      },
    },

    quest_answer: {
      handler(val) {
        this.data.quest_answer = val
      },
      immediate: true,
    },

    quest_options: {
      handler(val) {
        this.data.quest_options = val
      },
      immediate: true,
    },

    data: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true,
      immediate: true,
    },
  },
}
</script>

<style lang="scss" scoped></style>
